Build course category landing page - #306
Open
Idahjnr007 wants to merge 5 commits into
Open
Conversation
Added Autoplay Next Lecture Toggle in Video Player. Implemented an autoplay next lecture toggle in the video player so students can choose whether the next lecture starts automatically after the current one ends. 📋 Requirements Added an "Autoplay" toggle switch in VideoControls.tsx Default: on Persist preference in localStorage per user When lecture ends and autoplay is on: 5-second countdown overlay showing "Next: [lecture title]", then auto-navigate Cancel button during countdown cancels autoplay When autoplay is off: show "Next lecture" button on video end
https://github.com/Idahjnr007/Hamplard-frontend into Build-Course-Completion-Modal-with-Confetti-Animation
Added Video Playback Quality Selector Built a video playback quality selector so students on slower connections can reduce video quality to prevent buffering. 📋 Requirements Add quality selector button to VideoControls.tsx: Auto, 1080p, 720p, 480p, 360p When a quality is selected, switch the video src to the matching resolution URL Maintain current playback position when switching quality Show current quality label in button when not Auto "Auto" uses the browser's adaptive bitrate streaming 🔧 Technical Scope HTML5 video src switching src/components/learn/VideoControls.tsx 📂 Affected Path src/components/learn/VideoControls.tsx
Build Course Category Landing Page
CATEGORY_META — a lookup table mapping slugs to display name, emoji icon, tailored description, and a gradient pair. Covers all 10 existing Hamplard categories plus common extras.
getCategoryMeta(slug) — exported helper that falls back to a generated name for any unknown slug so the page degrades gracefully instead of crashing.
CategoryHero — renders the hero section: emoji icon bubble, h1, description, and a course-count pill badge. Gradient background comes from the category meta.
CategorySortSelect.tsx
Thin 'use client' component wrapping a <select> that calls router.push on change, keeping the page itself a pure Server Component.
src/app/categories/[slug]/page.tsx
generateStaticParams — fetches live categories from the API and falls back to CATEGORY_META keys if the API is unavailable during build.
generateMetadata — sets <title> and <description> per category.
Server-side data fetch with coursesApi.list({ category, limit: 100 }).
notFound() for slugs that are neither in CATEGORY_META nor have any API courses.
Subcategory pills — derived automatically from high-frequency words in course titles, rendered as <Link> pills that append ?sub=... to the URL (no JS needed).
Sort — ?sort=popular|rated|newest applied server-side to the fetched array.
Course grid — grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 matching the exact breakpoint spec.
Instructor spotlight — top 3 instructors ranked by course count then total enrollments, showing avatar/initials, bio, stats, and avg rating.
Related categories row — horizontally scrollable on mobile, 6-column grid on desktop, links to sibling category pages.
Closes Hamplard-Hub#168
|
@Idahjnr007 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #168
CATEGORY_META — a lookup table mapping slugs to display name, emoji icon, tailored description, and a gradient pair. Covers all 10 existing Hamplard categories plus common extras.
getCategoryMeta(slug) — exported helper that falls back to a generated name for any unknown slug so the page degrades gracefully instead of crashing.
CategoryHero — renders the hero section: emoji icon bubble, h1, description, and a course-count pill badge. Gradient background comes from the category meta.
CategorySortSelect.tsx
Thin 'use client' component wrapping a that calls router.push on change, keeping the page itself a pure Server Component. src/app/categories/[slug]/page.tsx generateStaticParams — fetches live categories from the API and falls back to CATEGORY_META keys if the API is unavailable during build. generateMetadata — sets <title> and per category. Server-side data fetch with coursesApi.list({ category, limit: 100 }). notFound() for slugs that are neither in CATEGORY_META nor have any API courses. Subcategory pills — derived automatically from high-frequency words in course titles, rendered as pills that append ?sub=... to the URL (no JS needed). Sort — ?sort=popular|rated|newest applied server-side to the fetched array. Course grid — grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 matching the exact breakpoint spec. Instructor spotlight — top 3 instructors ranked by course count then total enrollments, showing avatar/initials, bio, stats, and avg rating. Related categories row — horizontally scrollable on mobile, 6-column grid on desktop, links to sibling category pages.